<template>
<div :id="target" style="background-color:#ffffff;">
  <el-tree
    :data="URI"
    node-key="path"
    ref="tree"
    default-expand-all
    :expand-on-click-node="false"
    :style="{'height':slide_h}"
    style="overflow-y: auto;width:100%"
    :empty-text="(URI.length>0&&!isajax)?'':'数据初始化中...'"
  >
    <div class="custom-tree-node" slot-scope="{ node, data }">
      <span>{{ data.name }} <el-tag size="mini" :type="data.disabled?'success':'danger'">{{data.disabled?'已添加':'待添加'}}</el-tag></span>
      <span v-if="!data.disabled">
        <el-button
          type="text"
          size="mini"
          @click="() => append(data)">
          添加
        </el-button>
      </span>
      <span v-else>
      </span>
    </div>
  </el-tree>
  <v-dialog v-if="dialogshow==1" :dialogshow="dialogshow==1" :dialoginfo="dialoginfo" @changedialogshow="changedialogshow"></v-dialog>
</div>
</template>
<script>
import url from "@/router/url"
const pagination = () =>
  import ("@/components/pagination/pagetemplate")
const dialog = () =>
  import ("@/components/modules/sysManagement/perm/view_dialog_perm.vue")
export default {
  components: {
    "v-page": pagination,
    "v-dialog": dialog
  },
  data() {
    return {
      target:"newMenus",
      URI:[],
      dialoginfo: {},
      isajax: false,
      slide_h: (window.document.body.offsetHeight-216)+'px',
      dialogshow: 0,
      loadingTxt:"666"
    }
  },
  methods: {
    init(){
      this.$store.commit("saveLoadingMap",{"target":this.proAPI.URLS.getAllSysMenus,id:this.target,text:this.loadingTxt});
      this.proAPI.getJson(this.proAPI.URLS.getAllSysMenus).then((res) => {
          for(var i=0;i<res.data.length;i++){
            this.isExitInSysMenu(res.data[i],url);
          }
          this.URI=url;
      })
    },
    append(data){
      // console.log(data);
      // console.log(this.$refs.tree.getCheckedNodes());
      this.$emit("quickAddClick",data);
    },
    isExitInSysMenu(target,arr){
      for(var i=0;i<arr.length;i++){
        if(target.type==arr[i].type&&target.path==arr[i].path&&target.name==arr[i].name){
          arr[i].disabled=true;
          return arr;
        }
        this.isExitInSysMenu(target,arr[i].children);
      }
    },
    handleClick(row) {
      // console.log(row);
      this.dialogshow = 1;
      this.dialoginfo = row
      // console.log(this.dialogshow);
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // console.log(this.multipleSelection);
    },
    changepaginfo(val) {
      // this.pageinfo = val;
      // console.log(this.pageinfo);
    },
    changedialogshow() {
      this.dialogshow = 0;
      // console.log(this.dialogshow);
    },
    checkstatus(row) {
      return row.status != 1;
    },
    tableRowClassName({row, rowIndex}) {
        if (row.status === 1) {
            return 'success-row';
        }
        return '';
    }
  },
  mounted() {
    this.init();
  },
  updated() {
    // console.log(333);
  }
}
</script>
<style media="scoped">
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
</style>
